<template>
    <div>
        <el-form :inline="true" class="demo-form-inline">
            <el-form-item>
              <el-input v-model="titlename" placeholder="标题"
              size="small"
           
              ></el-input>
            </el-form-item>
            
              <el-form-item>
                <el-button type="primary" @click="onSubmit"  size="mini">查询</el-button>
              </el-form-item>
          </el-form>

       
       


        
       
          <template>
            <el-table
              :data="tableData"
              border
              height="370"
              :header-cell-style="{background:'#eef1f6',color:'#606266'}"
             
              >
              <el-table-column
                prop="savetime"
                label="创建草稿日期"
                width="180"
                v-if="tabindex==0">
              </el-table-column>
              <el-table-column
              prop="time"
              label="发布日期"
              width="180"
              v-if="tabindex==1">
            </el-table-column>
            <el-table-column
            prop="deltime"
            label="删除日期"
            width="180"
            v-if="tabindex==2">
          </el-table-column>
              <el-table-column
                prop="title"                         
                label="标题"
                width="180">
              </el-table-column>
            
              <el-table-column
                label="内容">
                <template  slot-scope="scope">
                  <el-popover
                  placement="top-start"
                  :title=scope.row.title
                  width="500"
                  trigger="hover"
                  >
                    <div v-html="scope.row.content" :id="'prindex'+scope.row.id"></div>


                 <div v-html="$options.filters.ellipsis(scope.row.content)" slot="reference" ></div>
                </el-popover>
      
              
              </template>
              
              </el-table-column>
           
              <el-table-column
              prop="person"
              label="发布人"
              width="100"
             
              >
            </el-table-column>
              <el-table-column
              label="操作"
             >
             <template slot-scope="scope">
                <el-button
                size="mini"
                @click="handleEdit(1, scope.row)" v-if="tabindex!=2">
                编辑</el-button>
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.row,tabindex)" v-if="tabindex!=2">删除</el-button>
                <el-button
                size="mini"
                type="danger"
                @click="completelydelete(scope.row)" v-if="tabindex==2">彻底删除</el-button>
                <el-button
                size="mini"
                type="danger"
                @click="restore(scope.row)" v-if="tabindex==2">恢复</el-button>
                <el-button
                size="mini"
                type="danger"
                @click="republish(scope.row)" v-if="tabindex==0">重新发布</el-button>
                <el-button
                size="mini"
                type="danger"
                 v-if="tabindex==1" v-print="'#prindex'+scope.row.id">打印</el-button>
                <!-- <el-button
                size="mini"
                type="danger"
                @click="btnPrint(scope.row.content)"
                 v-if="tabindex==1">转存为pdf</el-button> -->
                
             </template>

       

            </el-table-column>
            </el-table>
          </template>

          <!-- <div >
            <div v-html=contenthml ref="pdfDom" id="list"></div>
        
          </div> -->

  <div style="margin-top: 5px;">


  <el-pagination
  background
  layout="prev, pager, next"
  :total="100"
  @current-change="pagelist"
  >
</el-pagination>
</div>
      
   <!-- 编辑的模态框 -->


   <el-dialog title="编辑公告" :visible.sync="dialogFormVisible">
    <el-form :model="form">

        <newword :data=temp :index=tabindex @numchange="getsonnum" v-if="dialogFormVisible"></newword>
    </el-form>

  </el-dialog>

    </div>
  </template>
  <script>
    // 1 导入需要使用的组件


     import newword from '../views/newword.vue'
     import { htmlToPdf } from '../until/domToPdf.js';
     export default{
      components: {

        newword
  },

   props:["index"],
      data(){
        return{
          contentifdis:false,
            temp:{
            manager:{
              name:"",
              age:""   
         }
      },

            tabindex:this.index,
            tableData: [
            // {id:1,
            //           person:"张三",
            //           savetime:"2021-01-01",
            //           title:"标题",
            //           content:"123",
            //           status:1,
            //           time:"2021-01-01",
            //           deltime:"2021-01-01",

            //         },
                    {id:2,
                      person:"张三",
                      savetime:"2021-01-01",
                      title:"标题2",
                      content:"<h2>现在的情况狂极速版地下从事</h2>",
                      status:1,
                      time:"2021-01-01",
                      deltime:"2021-01-01",

                    }
            ],
            titlename:"",
            form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: '',
         
        },
        formLabelWidth: '120px',
        dialogFormVisible: false,
        contenthml:"<h2>测试另外打印的内容</h2>"
  
        }
      },
      filters: {
    //日期过滤
    formatDate(time) {
      if (time) {
        let date = new Date(time);
        return formatDate(date, 'yyyy-MM-dd hh:ss:mm');
      }
    },
    //当渲染的文字超出30字后显示省略号
    ellipsis(value) {
      if (!value) return "";
      if (value.length > 13) {
        return value.slice(0, 13) + "...";
      }
      return value;
    }
  },


      created(){
    
          //在刚进入页面的应该传入1 因为是第一页的数据
        this.selectallbyindex(this.tabindex,1)
      },
      methods:{

        btnPrint(text) {

    },
     
      
 

        contentifdiseven(index,item){
          console.log(item)

        },

        //分页的页码
    pagelist(e){
      console.log(e)
      this.selectallbyindex(this.tabindex,e)
    },

    //子组件之间的传值
        getsonnum(val){
            console.log(val)
            console.log("子组件发送成功")
            if(val==1){
                this.dialogFormVisible=false
            }
            //当编辑完 要刷新一下页面
            this.selectallbyindex(this.tabindex,1)

        },

        //查询列表所有的事件
   selectallbyindex(id,index){
  console.log("查询所有的事件")
  this.axios({
             url:this.$api+"/notice/select", 
             dataType:"json",
            method:'get',
            params: {
                status: id,
                pageNum:index,
                title:this.titlename
            },
            }).then((res)=>{
                 console.log(res.data)
                var list=[]
                if(res.data){
                for(var i=0;i<res.data.length;i++){
                    var item={}
                    var str=res.data[i]
                    item.id=str.id,
                    item.person=str.person,
                    item.savetime=str.savetime,
                    item.title=str.title ,
                    item.content=str.content
                    item.status=str.status
                    item.time=str.time
                    item.deltime=str.deltime
                    list.push(item)

                  
                }
         this.tableData=list
                }
            console.log(res)
            }).catch((res)=>{
                console.log(res)
            })

   },
   //编辑事件
   handleEdit(index,list){
  console.log("编辑事件")
  console.log(list)

 this.temp.manager=list

   this.dialogFormVisible=true

   },
      // 彻底删除
   completelydelete(row){
    this.$confirm('此操作为彻底删除 不可逆 是否确定删除', '确认信息', {
          distinguishCancelAndClose: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(res=>{

            this.axios({
             url:this.$api+"/notice/deleteNotice", 
             dataType:"json",
            //  String title,String content,String time,String person
            params:{
                id:row.id
            }
            }).then(res=>{
            console.log(res)
            this.$message({
             message: "删除成功",
            type: 'success'
            })   
            // 刷新页面
            this.selectallbyindex(2,1)


            }).catch(res=>{
            console.log(res)
            })

        }).catch(res=>{})
 
   },
   //恢复
   restore(row){
 
    this.$confirm('是否确认恢复', '确认信息', {
          distinguishCancelAndClose: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(res=>{

            this.axios({
             url:this.$api+"/notice/updateBySatus", 
             dataType:"json",
            //  String title,String content,String time,String person
            params:{
                id:row.id,
                status:1,
                deltime:"",
                time:this.timestampToTime(new Date(),2)

            }
            }).then(res=>{
            console.log(res)
            this.$message({
             message: "恢复成功",
            type: 'success'
            })  
             // 刷新页面
             this.selectallbyindex(2,1)
 

            }).catch(res=>{
            console.log(res)
            })

        }).catch(res=>{})

   },

   handleDelete(row,index){
    //index==0说明是草稿箱里面的删除操作 需要执行的是彻底删除
    //index==1说明是已发布里面的删除  需要改变状态 将其改变为删除里面的数据
    var url=""
    var params={}
    if(index==0){
       url="/notice/deleteNotice"
        params["id"]=row.id
    }
  
    if(index==1){
     url="/notice/updateBySatus"
   params["id"]=row.id
   params["status"]=2
   params["deltime"]=this.timestampToTime(new Date(),2);
   params["time"]=""

    }
    this.$confirm('是否确定删除公告', '确认信息', {
          distinguishCancelAndClose: true,
          confirmButtonText: '提交',
          cancelButtonText: '取消'
        }).then(res=>{
            this.axios({
             url:this.$api+url, 
             dataType:"json",
            //  String title,String content,String time,String person
            params:params
            }).then(res=>{
                this.$message({
             message: "删除成功",
            type: 'success'
            })   
            this.selectallbyindex(index,1)

          console.log(res)
            }).catch(res=>{
        console.log(res)
            })

        })



   },

   republish(row){
    console.log("重新发布")
   
    this.$confirm('是否发布公告', '确认信息', {
          distinguishCancelAndClose: true,
          confirmButtonText: '提交',
          cancelButtonText: '取消'
        }).then(res=>{
            this.axios({
             url:this.$api+"/notice/putDraft", 
             dataType:"json",
            //  String title,String content,String time,String person
            params:{
                id:row.id,
                time:this.timestampToTime(new Date(),2)
            }
            }).then(res=>{
                this.$message({
             message: "发布成功",
            type: 'success'
            })  
            this.selectallbyindex(0,1)
                  
            }).catch(res=>{})
           

        }).catch(res=>{})


   },

        onSubmit(){
            console.log("查询")
            console.log(this.titlename)

          this.selectallbyindex(this.tabindex,1)





        },

             //日期格式

             timestampToTime(times,num) {
     //num是判断是否返回时分秒 num=1为不传时分秒 num=2返回时分秒
    times=times.toLocaleString('en-US',{hour12: false}).split(" ")
    let time = times[1]
    let mdy = times[0]
    mdy = mdy.split('/')
    let month = parseInt(mdy[0]);
    let day = parseInt(mdy[1]);
    let year = parseInt(mdy[2])
    if(month<10){
        console.log(month)
        month="0"+month
      
    }
    if(day<10){
        day="0"+day
    }

    //是否传回时分秒 num=1为不传时分秒 num=2返回时分秒
  if(num==1){
    return  year + '-' + month + '-' + day 
  }
  else{
    return  year + '-' + month + '-' + day + ' ' + time
  }
 
   

},
      }
     }
  </script>
  <style>

  </style>